<template>
  <view class="personal-center">
    <!-- 顶部用户信息模块 -->
    <view class="user-info">
      <view class="user-avatar">
        <image :src="userInfo.avatar" v-if="userInfo.avatar" mode="aspectFill"></image> 
		<image src="https://bigironcollision.obs.cn-east-3.myhuaweicloud.com:443/temp%2Ftx_1757241357597.png" v-else mode="aspectFill"></image>
      </view>
      <view class="user-detail">
        <view class="user-nickname">{{userInfo.realname}}</view>
        <view class="user-account">账号: {{userInfo.id}}</view>
      </view>
      <view class="sign-in-btn" @click="handleSignIn">
        签到
      </view>
    </view>
    
    <!-- 金币收益模块 -->
    <view class="coin-earnings" @click="handleListClick('goldCoin')">
      <view class="coin-title">金币收益</view>
      <view class="coin-amount">{{totalGoldNum}}</view>
    </view>
    
    <!-- 中间菜单模块 -->
    <view class="menu-grid">
      <view class="grid-item" @click="handleMenuClick(0)">
        <image class="grid-icon" src="/static/img/bwcdingdan.png" mode="aspectFit"></image>
        <text class="grid-text">吃喝玩乐订单</text>
      </view>
	  <view class="grid-item" @click="handleMenuClick(1)">
	    <image class="grid-icon" src="/static/img/msdingdan.png" mode="aspectFit"></image>
	    <text class="grid-text">一口价订单</text>
	  </view>
	  <!-- <button open-type="share" class="grid-item shareBtn" >  
			<image class="grid-icon" src="/static/img/yqhy.png" mode="aspectFit"></image>
			<text class="grid-text">邀请好友</text>
	  </button> -->
	  <view class="grid-item" @click="handleListClick('wp2')">
	    <image class="grid-icon" src="/static/img/yqhy.png" mode="aspectFit"></image>
	    <text class="grid-text">邀请好友</text>
	  </view>
	  <view class="grid-item" @click="handleMenuClick(3)">
	    <image class="grid-icon" src="/static/img/shouc.png" mode="aspectFit"></image>
	    <text class="grid-text">我的收藏</text>
	  </view>
    </view>
    
    <!-- 底部列表模块 -->
    <view class="list-menu">
      <view class="list-item"  @click="handleListClick('team')">
        <view class="item-left">
          <image class="item-icon" src="/static/img/wdtd.png" mode="aspectFit"></image>
          <text class="item-text">我的团队</text>
        </view>
        <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
      </view>
	  <view class="list-item"  @click="handleListClick('couponList')">
	    <view class="item-left">
	      <image class="item-icon" src="/static/img/yhq.png" mode="aspectFit"></image>
	      <text class="item-text">优惠券</text>
	    </view>
	    <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
	  </view>
	  <!-- <view class="list-item"  @click="handleListClick('agreement')">
	    <view class="item-left">
	      <image class="item-icon" src="/static/img/yhxy.png" mode="aspectFit"></image>
	      <text class="item-text">用户协议</text>
	    </view>
	    <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
	  </view> -->
	  <view class="list-item"  @click="handleListClick('up')">
	    <view class="item-left">
	      <image class="item-icon" src="/static/img/yhxy.png" mode="aspectFit"></image>
	      <text class="item-text">修改个人资料</text>
	    </view>
	    <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
	  </view>
	  <view class="list-item"  @click="handleListClick('usageGuide')">
	    <view class="item-left">
	      <image class="item-icon" src="/static/img/czsc.png" mode="aspectFit"></image>
	      <text class="item-text">使用指南</text>
	    </view>
	    <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
	  </view>
	 <button open-type="contact">
	  <view class="list-item"  >
	    <view class="item-left">
	      <image class="item-icon" src="/static/img/kefu.png" mode="aspectFit"></image>
		    <text class="item-text">在线客服</text>
	     
	    </view>
	    <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
	  </view>
	  </button>
	<!-- <view class="list-item" v-if="version!=xsversion"  @click="handleListClick('businessesApply')">
	    <view class="item-left">
	      <image class="item-icon" src="/static/img/sj.png" mode="aspectFit"></image>
	      <text class="item-text">商家入驻</text>
	    </view>
	    <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
	  </view> -->
	  <view class="list-item"  @click="handleListClick('setUp')">
	    <view class="item-left">
	      <image class="item-icon" src="/static/img/shezi.png" mode="aspectFit"></image>
	      <text class="item-text">设置</text>
	    </view>
	    <image class="item-arrow" src="/static/img/icon_arrow_right.png" mode="aspectFit"></image>
	  </view>
    </view>
	<!-- <image @click="shareImg" src="https://bigironcollision.obs.cn-east-3.myhuaweicloud.com:443/f2e54b1d-3069-470d-b094-e646e44a337e" mode=""></image> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'http://dmsphoto.66km.com.cn/thFiles/908774A6-3B38-4C63-B6E4-19B3A8FBFB65.png',
        nickname: '微信用户',
        account: 'user123456',
        coins: 1288
      },
      gridMenu: [
        { name: '霸王餐订单', icon: '/static/img/bwcdingdan.png' },
        { name: '秒杀区订单', icon: '/static/img/msdingdan.png' },
        { name: '邀请好友', icon: '/static/img/yqhy.png' },
        { name: '我的收藏', icon: '/static/img/shouc.png' }
      ],
      listMenu: [
		{ name: '我的优惠券', icon: '/static/logo.png' },
        { name: '操作指南', icon: '/static/logo.png' },
        { name: '在线客服', icon: '/static/logo.png' },
        { name: '设置', icon: '/static/logo.png' }
      ],
	  token:'',
	  userInfo:'',
	  totalGoldNum:0,
	  version:2,
	  xsversion:'',
    }
  },
  onShow() {
  	this.token= uni.getStorageSync("token")
	this.userInfo=uni.getStorageSync("userInfo")
	if(this.token){
		this.getGold()
	}
	this.getAppVersion()
  },
  methods: {
	  getAppVersion(){
	  		  this.$http('jeecg-boot/api/wx/getAppVersion',{
	  		  		  
	  		  },'GET').then(res => {
	  		  		  this.xsversion=res.result
	  				 
	  		  })
	  },
	getGold(){
	  this.$http('jeecg-boot/app/market/bicGoldRecord/getTotalGoldKsyNumByUserId',{
	  	/* userId:this.userInfo.id,
		status:1 */
	  },'GET').then(res => {
		  if(res.result){
			   this.totalGoldNum=res.result.totalGoldNum
		  }
	  	 
	  	 
	   })
	},
    handleSignIn() {
		 if(!this.token){
				uni.navigateTo({
					url:'../index/login'
				})  
				return false
		 }
		 uni.navigateTo({
		 	url:'signIn'
		 })
    },
    handleMenuClick(index) {
	  if(!this.token){
		uni.navigateTo({
			url:'../index/login'
		})  
		return false
	  }
      if(index==0){
		  uni.navigateTo({
		  	url:'orderList'
		  })
	  }
	  if(index==1){
		  uni.navigateTo({
			url:'orderListMs'
		  })
	  }
	  if(index==2){
	  		
	  }
	  if(index==3){
		uni.navigateTo({
			url:'collect'
		})
	  }
    },
    handleListClick(url) {
		if(!this.token){
			uni.navigateTo({
				url:'../index/login'
			})  
			return false
		}
     uni.navigateTo({
     	url:url
     })
    },
	shareImg(){
	   uni.downloadFile({
	   	url: 'https://bigironcollision.obs.cn-east-3.myhuaweicloud.com:443/f2e54b1d-3069-470d-b094-e646e44a337e', //仅为示例，并非真实的资源
	   	success: (res) => {
			console.log(res)
	   		if (res.statusCode === 200) {
	   			uni.saveImageToPhotosAlbum({//保存图片到系统相册。
					filePath: res.tempFilePath,//图片文件路径
					success: function() {
						uni.showToast({
							title: '图片保存成功',
							icon: 'none',
						});
					},
					fail: function(e) {
						console.log(e);
						uni.showToast({
							title: '图片保存失败',
							icon: 'none',
						});
					}
				});
	   			
	   		}
	   	}
	   });	
	},
  },
  onShareAppMessage(res) {
  	console.log(res)
  	var img='';
  	/* if(this.mainImg){
  		img=this.mainImg
  	}else{
  		img="http://dmsphoto.66km.com.cn/thFiles/83074F71-F5C9-4C8E-B23F-2D195788960B.png"
  	} */
  	
  	var url= 'pages/index/index?shareId='+this.userInfo.id
  	
  	return {
  		title: '',
  		imageUrl:'',
  		//imageUrl:this.mainImg,
  		//imageUrl:'http://dmsphoto.66km.com.cn/thFiles/83074F71-F5C9-4C8E-B23F-2D195788960B.png',
  		path:url,
  		success(res){
  			uni.showToast({
  				title:'分享成功'
  			})
  		},
  		fail(res){
  			uni.showToast({
  				title:'分享失败',
  				icon:'none',
  				duration: 3000
  			})
  		}
  	}
	/* 
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/...'//客服地址链接
					},
					corpId: '企业ID',//必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				 */
  },
  
}
</script>

<style lang="scss" scoped>
.personal-center {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  position: relative;
  
  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .user-detail {
    flex: 1;
    margin-left: 30rpx;
    
    .user-nickname {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .user-account {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .sign-in-btn {
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    border-radius: 30rpx;
    background: linear-gradient(to right, #ff5e5e, #ff2d2d);
    box-shadow: 0 4rpx 12rpx rgba(255, 45, 45, 0.3);
  }
}

/* 金币收益样式 */
.coin-earnings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  
  .coin-title {
    font-size: 32rpx;
    color: #333;
  }
  
  .coin-amount {
    font-size: 36rpx;
    color: #ff9900;
    font-weight: bold;
  }
}

/* 网格菜单样式 */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx 0;
  
  .grid-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    
    .grid-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 15rpx;
    }
    
    .grid-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

/* 列表菜单样式 */
.list-menu {
  background-color: #fff;
  border-radius: 16rpx;
  
  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
     /* border-bottom: none; */
    }
    
    .item-left {
      display: flex;
      align-items: center;
      
      .item-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }
      
      .item-text {
        font-size: 28rpx;
        color: #333;
      }
    }
    
    .item-arrow {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
button::after{
	 	border: none;
	}
	button{
		position: relative;
		display: block;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		
		height: 100%;
		}
</style>